<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
  </head>
  <body>
    <div id="app">
      <!-- 加上修饰符，让该表单输入的每次都是数字类型 -->
      语文: <input type="text" v-model.number="chinese" /> 数学：<input
        type="text"
        v-model.number="math"
      />
      <br />
      总分(methods-单向)：<input type="text" v-model="total()" /> <br />
      总分(计算属性-单向)：<input type="text" v-model="total1" /> <br />
      总分(计算属性-双向)：<input type="text" v-model="total2" /> <br />
      总分(监听器)：<input type="text" v-model="total3" /> <br />
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    let vm = new Vue({
      //挂载点
      el: "#app",

      //数据
      data: {
        chinese: 60,
        math: 90,
        total3: 0,
      },

      //方法
      methods: {
        //方法实现求总分
        total() {
          console.log("总分-methods");
          return this.chinese * 1 + this.math * 1;
        },
      },

      //计算属性
      computed: {
        total1() {
          //只写一个方法的时候就是get方法
          console.log("计算属性-缓存效果");
          return this.chinese * 1 + this.math * 1;
        },

        total2: {
          get() {
            //如果计算属性，既有get又有set。调用的时候，默认走get方法，得到一个返回值
            //get方法一定要写return
            return this.chinese * 1 + this.math * 1;
          },
          set(val) {
            //set的方法可以接收外部输入的值
            console.log(val);
            this.chinese = val / 2;
            this.math = val / 2;
          },
        },
      },

      //侦听器
      watch: {
        //侦听语文成绩
        chinese(newval) {
          console.log(newval, "侦听语文成绩");
          this.total3 = newval + this.math;
        },
        total3(newval) {
          console.log(newval, "侦听总成绩");
          this.chinese = this.math = newval / 2;
        },
      },
    });

    console.log(vm);

    vm.$watch("math", (newval) => {
      console.log(newval, "侦听数学成绩");
    });
  </script>
</html>
